import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import './style.scss';
import { actionCreators } from './store';

class ScoreSearch extends PureComponent {
    render() {
        const { searchStatus, searchText, hotsData, historyData, scoreData, operateChangeText, operateDeleteText, searchDefiniteScore, operateSelectLabel, operateEmptyHistory } = this.props
        return (
            <div className="scoreSearch">
                <div className="searchHeader">
                    <div className="searchCircle">          
                        <div className="searchIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/search_02@2x.png" alt="" />
                        </div>
                        <div className="searchInput">
                            <input type="text" 
                                placeholder="搜索歌曲名或者演唱者" 
                                cursor-spacing="10"
                                value={searchText}
                                onChange={
                                    (e) => operateChangeText(e)
                                }
                                onKeyDown={
                                    (e) => searchDefiniteScore(e, searchText)
                                } 
                            />
                        </div>
                        {
                            (()=> {
                                if (searchText) {
                                    return (
                                        <div className="searchEmpty" onClick={
                                            () => operateDeleteText()
                                        }>
                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/close_02@2x.png" alt="" />
                                        </div>
                                    )
                                }
                            })()
                        }
                    </div>
                </div>
                
                {
                    (() => {
                        if (searchStatus === 0) {
                            return (
                                <div className="searchPrompt">
                                    <div className="hotsSearch">
                                        <div className="promptTitle">热门搜索</div>
                                        <div className="promptList">
                                            {
                                                hotsData.map((item, index) => {
                                                    return (
                                                        <div className="promptCell" 
                                                            key={'hot'+index}
                                                            onClick={
                                                                () => operateSelectLabel(item)
                                                        }>{item}</div>
                                                    )
                                                })
                                            }
                                        </div>
                                    </div>
                                    <div className="historySearch">
                                        <div className="promptTitle">历史搜索</div>
                                        <div className="promptEmpty" onClick={
                                            () => operateEmptyHistory()
                                        }>
                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/delete@2x.png" alt="" />
                                        </div>
                                        {
                                            (() => {
                                                if (JSON.stringify(historyData) !== '[]') {
                                                    return (
                                                        <div className="promptList">
                                                            {
                                                                historyData.map((item, index) => {
                                                                    return (
                                                                        <div className="promptCell" 
                                                                            key={'history'+index} 
                                                                            onClick={
                                                                                () => operateSelectLabel(item)
                                                                        }>{item}</div> 
                                                                    )
                                                                })
                                                            }
                                                        </div>
                                                    )
                                                } else {
                                                    return (
                                                        <div className="promptNone">暂无历史搜索</div>
                                                    )
                                                }
                                            })()
                                        }
                                    </div>
                                </div>
                            )
                        } else {
                            if (searchText) {
                                return (
                                    <div className="searchResult">
                                       <div className="resultList">
                                            {
                                                scoreData.map((item, index) => {
                                                    return (
                                                        <div className="resultCell" key={'result'+index}>
                                                            <div className="cellImage">
                                                                <img src={item.SINGER_IMG ? item.SINGER_IMG : 'http://mobuz-mp.cdn.bcebos.com/matter/loading_figure@2x.png'} alt="" />
                                                            </div>
                                                            <div className="cellmessage">
                                                                <div className="cellName">{item.NAME}</div>
                                                                <div className="cellLine">
                                                                    <div className="cellSinger">{item.SINGER}</div>
                                                                    <div className="cellHot">
                                                                        <div className="hotIcon">
                                                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/heat@2x.png" alt="" />
                                                                        </div>
                                                                        <div className="hotCount">{item.HOT || 0}</div>
                                                                    </div>
                                                                    {
                                                                        (() => {
                                                                            if (item.FAVORITE_ID  && item.FAVORITE_ID != null) {
                                                                                return (
                                                                                    <div className="cellCollect">
                                                                                        <img src="http://mobuz-mp.cdn.bcebos.com/matter/like@2x.png" alt="" />
                                                                                    </div>
                                                                                )
                                                                            } else {
                                                                                return (
                                                                                    <div className="cellCollect">
                                                                                        <img src="http://mobuz-mp.cdn.bcebos.com/matter/not_like@2x.png" alt="" />
                                                                                    </div>
                                                                                )
                                                                            }
                                                                        })()
                                                                    }
                                                                </div>
                                                            </div>
                                                        </div>
                                                    )
                                                })
                                            }
                                       </div>
                                        {
                                            (() => {
                                                if (JSON.stringify(scoreData) === '[]' && searchStatus === 3) {
                                                    return (
                                                        <div className="resultNone">
                                                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/default_05@2x.png" alt="" />
                                                        </div>
                                                    )
                                                }
                                            })()
                                        }
                                    </div>
                                )
                            }
                        }
                    })() 
                }

          </div>
        )
    }
}

const mapState = (state) => ({
    searchStatus: state.scoreSearch? state.scoreSearch.searchStatus: 0,
    searchText: state.scoreSearch? state.scoreSearch.searchText: '',
    hotsData: state.scoreSearch? state.scoreSearch.hotsData: [],
    historyData: state.scoreSearch? state.scoreSearch.historyData: [],
    scoreData: state.scoreSearch? state.scoreSearch.scoreData: []
});

const mapDispatch = (dispatch) => ({
    operateChangeText(e) {
        dispatch(actionCreators.operateChangeText(e.target.value));
    },
    operateDeleteText() {
        dispatch(actionCreators.operateDeleteText());
    },
    searchDefiniteScore(e, searchText) {
        if (e.keyCode === 13) {
            const page = 0;
            const open_id = 'obNhV46x4LBUifs9J_8oRiRkwC5w';
            const union_id = 'oFulp0ocXjgeRLATrkVChMNhyIgk';
            dispatch(actionCreators.searchDefiniteScore(searchText, page, open_id, union_id));
        }
    },
    operateSelectLabel(item) {
        dispatch(actionCreators.operateSelectLabel(item));
    },
    operateEmptyHistory() {
        dispatch(actionCreators.operateEmptyHistory());
    }

});

export default connect(mapState, mapDispatch)(withRouter(ScoreSearch));